<script setup>
import {ref} from "vue"
import { httpRequest } from '../../utils/http';

const activeList = ref([]) // 需要渲染的活动数组

// 发送请求获取活动数组
const getActive = async() => {
    const res = await httpRequest('/api/releTaskByShopId','POST',{
        shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
    })
    console.log(res);
    activeList.value = res.data
}
getActive()

//跳转至发布活动页面
const goReleaseTask = () => {
    uni.navigateTo({ url: '/pageA/index/releaseTask' })
}

//跳转至活动详情页面
const goDetails = (i) => {
    uni.navigateTo({ url: `/pageA/index/activeDetails?item=${JSON.stringify(activeList.value[i])}` })
}
</script>
<template>
    <view class="page">
        <view class="item" @click="goDetails(index)" v-for="item,index in activeList" :key="index">
            <view class="name">{{item.taskName}}</view>
            <view style="display: flex;justify-content: space-between;">
                <view class="num">
                    <text style="margin-right: 30rpx;">达人数1</text>
                    <text>发布视频{{item.videoNum}}</text>
                </view>
                <text class="initiate" :class="item.start==1?'initiate-active':''">{{item.start==1?"进行中":"已完成"}}</text>
            </view>
        </view>
        <view class="fixed">
            <view class="center" @click="goReleaseTask">
                <image style="width: 80rpx;height: 80rpx;" src=""/>
                创建活动
            </view>
        </view>
    </view>
</template>

<style lang="scss">
    .page{
        padding: 30rpx;
        box-sizing: border-box;
        padding-bottom: 250rpx;
        .item{
            width: 690rpx;
            height: 192rpx;
            background-color: #fff;
            border-radius: 16rpx;
            padding: 36rpx 30rpx;
            box-sizing: border-box;
            margin-bottom: 30rpx;
            .name{
                font-size: 32rpx;
                font-weight: 500;
                color: rgb(48,49,51);
                margin-bottom: 30rpx;
            }
            .num{
                font-size: 28rpx;
                color: rgb(144,147,153);
            }
            .initiate{
                font-size: 28rpx;
                color: rgb(144,147,153)
            }
            .initiate-active{
                color: rgb(252,139,0) !important;
            }
        }
        .fixed{
            position: fixed;
            bottom: 0;
            left: 0;
            padding-bottom: 68rpx;
            width: 100%;
            height: 166rpx;
            background-color: #fff;
            .center{
                position: absolute;
                top: -24rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 96rpx;
                height: 122rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                font-size: 24rpx;
                color: rgb(144,147,153);
                margin: 0 auto;
            }
        }
    }
</style>